import React,{Suspense} from 'react'
import {Navigate,Route,Routes,BrowserRouter} from "react-router-dom"
import routers from "./routerConfig"
interface PROPS {

}
interface MYROUTERS {
    to?:string,
    path:string,
    component?:any,
    children?:MYROUTERS[]
}


function RouterViews(props:PROPS) {
    let renderDom=(routers:MYROUTERS[])=>{
        return routers.map((item:MYROUTERS,index:number)=>{
            return <Route path={item.path} key={index} element={
                item.to?<Navigate to={item.to}></Navigate>:<item.component/>
            }>
              {  item.children&&renderDom(item.children)}
            </Route>
        })
    }


  return (
    <BrowserRouter>
    <Suspense fallback={<div>...loading</div>}>
      <Routes>
          {renderDom(routers)}
      </Routes>


    </Suspense>
        
    </BrowserRouter>
  )
}

export default RouterViews
